<template>
  <div class="grand-child">
    <h2>孙子组件</h2>
    <h3>银子:{{ money }}</h3>
    <h3>车:{{ car.name }}，价格:{{ car.price }}</h3>
    <button @click="updateMoney(2)">花点钱</button>
  </div>
</template>

<script setup lang="ts">
import { ref, inject } from 'vue'

// 第一个参数是key，第二个参数是默认值
let {money,updateMoney} = inject('money',   {
  money:0,
  updateMoney:(x:number)=>{
  }
})
let car = inject('che', {
  name: '默认奔驰',
  price: 0
})

let toy = ref('孙子玩具 ')

</script>

<style scoped>
.grand-child {
  padding: 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  background-color: rgb(172, 40, 184);
  border-radius: 10px;
}
</style>